<template>
    <div id="beamChart" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'BeamformingChart',
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            var chartDom = document.getElementById('beamChart');
            var myChart = echarts.init(chartDom);
            var option;

            // 静态data数据模拟波束成型
            const data = [
                [0, 0],
                [0.1, 10],
                [0.2, 20],
                [0.3, 30],
                [0.4, 40],
                [0.5, 50],
                [0.6, 60],
                [0.7, 70],
                [0.8, 80],
                [0.9, 90],
                [1, 100],
                [0.9, 110],
                [0.8, 120],
                [0.7, 130],
                [0.6, 140],
                [0.5, 150],
                [0.4, 160],
                [0.3, 170],
                [0.2, 180],
                [0.1, 190],
                [0, 200],
                [0.1, 210],
                [0.2, 220],
                [0.3, 230],
                [0.4, 240],
                [0.5, 250],
                [0.6, 260],
                [0.7, 270],
                [0.8, 280],
                [0.9, 290],
                [1, 300],
                [0.9, 310],
                [0.8, 320],
                [0.7, 330],
                [0.6, 340],
                [0.5, 350],
                [0.4, 360]
            ];

            option = {
                title: {
                    text: 'Beamforming Simulation'
                },
                polar: {
                    center: ['50%', '54%']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                angleAxis: {
                    type: 'value',
                    startAngle: 0
                },
                radiusAxis: {
                    min: 0
                },
                series: [
                    {
                        coordinateSystem: 'polar',
                        name: 'Beam',
                        type: 'line',
                    showSymbol: false,
                        data: data
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    }
};
</script>

<style scoped>
/* 样式部分 */
</style>